<template>
  <app-dialog-form
    :title="`${props.cateId ? '编辑' : '添加'}分类`"
    :confirm="handleSubmit"
    width="700px"
    @closed="handleDialogClosed"
    @open="handleDialogOpen"
  >
    <el-form
      ref="form"
      :model="formData"
      :rules="formRules"
      label-width="150px"
      v-loading="formLoading"
    >
      <el-form-item
        label="分类名称"
        prop="title"
      >
        <el-input
          v-model="formData.title"
          placeholder="请输入分类名称"
        />
      </el-form-item>
      <el-form-item
        label="分类简介"
        prop="intr"
      >
        <el-input
          v-model="formData.intr"
          type="textarea"
          :rows="4"
          placeholder="请输入分类简介"
        />
      </el-form-item>
      <el-form-item
        label="分类图片"
        prop="image"
      >
        <app-image-upload-input
          v-model="formData.image"
        />
      </el-form-item>
      <el-form-item
        label="排序"
        prop="sort"
      >
        <el-input-number
          v-model="formData.sort"
          :min="0"
          label="请输入排序"
        />
      </el-form-item>

      <el-form-item
        prop="status"
        label="状态"
      >
        <el-radio-group v-model="formData.status">
          <el-radio
            :label="1"
          >
            显示
          </el-radio>
          <el-radio
            :label="0"
          >
            隐藏
          </el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
  </app-dialog-form>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type { PropType } from 'vue'
import type { IElForm, IFormRule } from '@/types/element-plus'
import { ElMessage } from 'element-plus'
import type { CategoryForm } from '@/api/types/article'
import { saveArticleCategory, updateArticleCategory, getArticleCategoryEditRule, getArticleCategoryCreateRule } from '@/api/article'

const props = defineProps({
  cateId: { // 编辑的文章分类 ID
    type: Number as PropType<number | null>,
    default: null
  }
})

interface EmitsType {
  (e: 'update:cate-id', value: number | null): void
  (e: 'success'): void
}

const emit = defineEmits<EmitsType>()

const form = ref<IElForm | null>(null)
const formLoading = ref(false)
const formData = ref<CategoryForm>({
  id: undefined,
  title: '',
  intr: '',
  image: '',
  sort: 1,
  status: 1
})

const formRules = ref<IFormRule>({})

formLoading.value = true
const handleDialogOpen = () => {
  formLoading.value = true
  loadCategory().finally(() => {
    formLoading.value = false
  })
}

const loadCategory = async () => {
  const dataRules = props.cateId ? await getArticleCategoryEditRule(props.cateId) : await getArticleCategoryCreateRule()

  dataRules.forEach(item => {
    (formData.value as any)[item.field] = item.value
    if (item.validate) {
      formRules.value[item.field] = item.validate
    }
  })
}

const handleDialogClosed = () => {
  emit('update:cate-id', null)
  form.value?.clearValidate() // 清除验证结果
  form.value?.resetFields() // 清除表单数据
}

const handleSubmit = async () => {
  const valid = await form.value?.validate()
  if (!valid) {
    return
  }
  const saveFn = props.cateId ? (data: CategoryForm) => { return updateArticleCategory(props.cateId || 0, data) } : saveArticleCategory
  await saveFn(formData.value)
  emit('success')
  ElMessage.success('保存成功')
}

</script>

<style lang="scss" scoped>
.el-select {
  width: 100%;
}
</style>
